<template>
    <div>
      <button @click="changeStack()">stack</button>
    <div id="myChart" :style="{width: '95%', height: '600px'}"></div>
  </div> 
</template>

<script>
export default {
  mounted(){
    this.init()
  },
  data(){
    return {option:{},echarts:{}}
  },
  methods:{
    changeStack(){
      for (var s of this.option.series){              
        // s.stack=!s.stack
        if(s.stack===false){
          //现在是堆叠，点击后变为非堆叠
          console.log('not 2 stack')          
          s.label.show=true
          s.stack=s.g
        }
        else{
          //现在是非堆叠，点击后变为堆叠
          console.log('stack 2 not') 
          if(s.isLast){
            // console.log(s)
            s.label.show=false          
          }
          s.stack=false
        }
      }
      this.echarts.setOption(this.option)
    },
    init(){
      let echartsObj = this.$echarts.init(document.getElementById('myChart'));
      this.echarts=echartsObj

    var series = [{
        name: 'A医院报修',
        g:"a",
        data: [100, 115, 165, 107, 67],
        // barGap:0,
        // barCategoryGap: 0
    },
    {
        name: 'B医院报修',
        g:"a",
        data: [100, 115, 165, 107, 67],
        // barGap:0,
        // barCategoryGap: 0
    },
     {
        name: 'C医院报修',
        g:"a",
        data: [85, 106, 129, 161, 123],
        barGap:0,
        barCategoryGap: 0
    },{
        name: 'A医院完成',
        g:"b",
        data: [85, 106, 129, 161, 123],
        // barGap:10,
        // barCategoryGap: 10
    }, {
        name: 'B医院完成',
        g:"b",
        data: [67, 87, 86, 167, 157],
        // barGap:0,
        // barCategoryGap: 0
    },{
        name: 'C医院完成',
        g:"b",
        data: [67, 87, 86, 167, 157],
        // barGap:0,
        // barCategoryGap: 0
    },
    {
        name: 'sum a',
        g:"a",
        data: [0,0,0,0,0]
    }, {
        name: 'sum b',
        g:"b",
        data: [0,0,0,0,0]
    }]

    const labelOption = {
      show: true,
      // position: 'insideBottom',
      distance: 5,
      align: 'center',
      verticalAlign: 'middle',
      rotate: 90,
      // formatter: '{c} \n {name|{a}}',
      formatter: '{c} {name|{a}}',
      fontSize: 16,
      rich: {
        name: {}
      }
    };

    var genFormatter = (series,index,o) => {
        return (param) => {
            // console.log(param);
            let sum = 0;
            series.forEach(item => {
                if(item.g==o.g)
                  sum += item.data[param.dataIndex];
            });
            return sum
        }
    };

    function isLastSeries(index,o) {
      var lastindex=-1;
      for(var i in series){
        if(series[i].g==o.g){
          lastindex=i
        }
      }
      console.log(index,lastindex)
      return index==lastindex
      // return index === series.length - 1
    }

    function isShow(index,item){
      if(item.stack===false){
        var islast=isLastSeries(index)
        if(islast) return false
      }
      return true
    }

    this.option = {
        color: ['#b8d6f2', '#c6e19a', '#f3b879' ],
        legend: {
            data: series.map(item => item.name),
            right: 'right',
            
        },
        xAxis: {
            type: 'category',
            data: ['2022-1', '2022-2', '2022-3', '2022-4', '2022-5']
        },
      
        yAxis: {
            type: 'value'
        },
        series: series.map((item, index) => Object.assign(item, {
            type: 'bar',
            // stack: true,
            // stack:item.g,
            stack:false,
            isLast:isLastSeries(index,item),
            label: isLastSeries(index,item)? {
                show: true ,
                formatter: isLastSeries(index,item) ? genFormatter(series,index,item) : null,
                fontSize:  isLastSeries(index,item) ? 20 : 15,
                color: 'black',
                position: isLastSeries(index,item) ? 'top' : 'inside'
            }:labelOption,
        }))
    };
    echartsObj.setOption(this.option)
    }
  }
}
</script>

<style>

</style>